<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
    <!-- 表单练习 -->
     <!-- form标签是表单的容器 -->
    <form>
        <label>用户:</label>
        <input type="text" placeholder="请输入内容"><br>
        <label for="password">密码: </label>
        <input type="password" id="password" placeholder="请输入内容"><br><br>

        <label>性别：</label>
        <input type="radio" name="gender"> 男
        <input type="radio" name="gender"> 女
        <input type="radio" name="gender"> 其他 <br>

        <label>爱好：</label>
        <input type="checkbox" name="hobby">唱
        <input type="checkbox" name="hobby">跳
        <input type="checkbox" name="hobby">RAP
        <input type="checkbox" name="hobby">篮球<br><br>

        <input type="submit" onclick="click_on()">
        <input type="text" onfocus="focus_on()" onblur="lost_focus()">
    </form> 
    </div>
    <script>
        // 点击事件
        function click_on() {
            alert("表单已成功提交");
        }

        // 聚焦事件
        function focus_on() {
            console.log("获得焦点");
        }

        // 失去焦点
        function lost_focus() {
            console.log("失去焦点");
        }
    </script>
   
</html>